<template>
	<view class="app">
		<!-- 背景 -->
		<view class="head">
			<view class="box" v-for="iten in 10"></view>
		</view>
		<!-- 顶部 -->
		<view class="dingbu" v-for="(item,index) in list" :key="index">
			<view class="dingbu-a">
				<view class="dingbu-a-a">
					<image :src="item.img" style="width: 100px; height: 100px;"></image>
				</view>
				<view class="dingbu-a-b">
					<view class="dingbu-a-b-a">
						<text>{{item.name}}</text>
						<u-icon :name="item.gender === '男' ? 'man' : 'woman'"
							:color="item.gender === '男' ? '#00aaff' : '#ffa6e3'" size="25px"></u-icon>
					</view>
					<view class="dingbu-a-b-b">
						<text>学号:{{item.num}}</text>
					</view>
					<view class="dingbu-a-b-c">
						<text>累计上课: <text style="font-size: 20px; font-weight: bold;">{{item.sksj}}</text></text>
						<text>剩余课时: <text style="font-size: 20px; font-weight: bold;">{{item.syks}}</text></text>
						<text>成长值: <text style="font-size: 20px; font-weight: bold;">{{item.ks}}</text></text>
					</view>
				</view>
			</view>
			<view class="dingbu-b">
				<view class="dingbu-b-a">
					<view class="dingbu-b-a-a">
						<image src="../../static/u3931.png" style="width: 45px; height: 45px;"></image>
					</view>
					<text style="line-height: 15px;">我的余额</text>
				</view>
				<view class="dingbu-b-b">
					<view class="dingbu-b-b-a">
						<image src="../../static/u3929.png" style="width: 45px; height: 45px;"></image>
					</view>
					<text style="line-height: 15px;">我的订单</text>
				</view>
				<view class="dingbu-b-c">
					<view class="dingbu-b-c-a">
						<image src="../../static/u3930.png" style="width: 45px; height: 45px;"></image>
					</view>
					<text style="line-height: 15px;">优惠劵</text>
				</view>
				<view class="dingbu-b-d">
					<view class="dingbu-b-d-a">
						<image src="../../static/u3927.png" style="width: 45px; height: 45px;"></image>
					</view>
					<text style="line-height: 15px;">在线客服</text>
				</view>
				<view class="dingbu-b-e">
					<view class="dingbu-b-e-a">
						<image src="../../static/u3928.png" style="width: 45px; height: 45px;"></image>
					</view>
					<text style="line-height: 15px;">关于我们</text>
				</view>
				<view class="dingbu-b-f">
					<view class="dingbu-b-f-a">
						<image src="../../static/u3937.png" style="width: 45px; height: 45px;"></image>
					</view>
					<text style="line-height: 15px;">学习打卡</text>
				</view>
			</view>
			<view class="dingbu-c">
				<view class="dingbu-c-a">
					<view class="dingbu-c-a-a">
						<image src="../../static/登录天数.png" style="width: 45px; height: 45px;"></image>
					</view>
					<text style="line-height: 15px;">在线<text
							style="font-size: 20px; font-weight: bold;">{{aaa}}</text>天</text>
				</view>
				<view class="dingbu-c-b">
					<view class="dingbu-c-b-a">
						<image src="../../static/修改、修改资料.png" style="width: 35px; height: 35px;"></image>
					</view>
					<text style="line-height: 15px;">编辑信息</text>
				</view>
				<view class="dingbu-c-c">
					<view class="dingbu-c-c-a">
						<image src="../../static/退出.png" style="width: 35px; height: 35px;"></image>
					</view>
					<text style="line-height: 15px;">退出账号</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					img: '/static/u3907.png',
					name: 'Andy',
					num: 1234546,
					sksj: '12',
					syks: '300',
					ks: '50',
					gender: '女'
				}],
				aaa: 666
			};
		}
	}
</script>

<style lang="scss">
	.app {
		padding: 0;
		margin: 0;

		.head {
			position: relative;
			z-index: 1;
			width: 100%;
			height: 100vh;
			background-color: #000;
			overflow: hidden;
			animation: bgColor 20s linear infinite;

			.box {
				position: absolute;
				width: 80rpx;
				height: 80rpx;
				background-color: #fff;
				animation: ani 10s linear infinite;
			}

			:nth-child(3n+1) {
				background-color: transparent;
				border: 1rpx solid #fff;
			}

			:nth-child(1) {
				top: 25%;
				left: 50%;
				animation: ani 12s linear infinite;
			}

			:nth-child(2) {
				top: 45%;
				left: 25%;
				animation: ani 6s linear infinite;

			}

			:nth-child(3) {
				top: 15%;
				left: 85%;
				animation: ani 15s linear infinite;
			}

			:nth-child(4) {
				top: 75%;
				left: 5%;
				animation: ani 8s linear infinite;
			}

			:nth-child(5) {
				top: 95%;
				left: 85%;
				animation: ani 11s linear infinite;
			}

			:nth-child(6) {
				top: 95%;
				left: 15%;
				animation: ani 18s linear infinite;
			}

			:nth-child(7) {
				top: 45%;
				left: 55%;
				animation: ani 9s linear infinite;
			}

			:nth-child(8) {
				top: 65%;
				left: 55%;
				animation: ani 12s linear infinite;
			}

			:nth-child(9) {
				top: 55%;
				left: 90%;
				animation: ani 10s linear infinite;
			}

			:nth-child(10) {
				top: 55%;
				left: 90%;
				animation: ani 15s linear infinite;
			}

			@keyframes ani {
				0% {
					transform: scale(0) translateY(0) rotate(0deg);
				}

				100% {
					transform: scale(1) translateY(-500rpx) rotate(360deg);
				}
			}

			@keyframes bgColor {
				20% {
					background-color: #ffc480;
					/* 浅橙色 */
				}

				40% {
					background-color: #a3cee9;
					/* 浅蓝色 */
				}

				60% {
					background-color: #ffecb3;
					/* 浅金色 */
				}

				80% {
					background-color: #e1bee7;
					/* 浅紫色 */
				}

				100% {
					background-color: #393939;
					/* 回到浅灰色 */
				}
			}


		}

		.dingbu {
			width: 88%;
			height: 75vh;
			margin: 0 auto;
			background-color: rgba(54, 20, 66, 0);
			position: absolute;
			z-index: 2;
			top: 13%;
			left: 6%;

			.dingbu-a {
				width: 100%;
				height: 25vh;

				.dingbu-a-a {
					width: 100%;
					height: 13vh;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.dingbu-a-b {
					width: 100%;
					height: 12vh;

					.dingbu-a-b-a {
						width: 100%;
						height: 4vh;
						display: flex;
						color: white;
						font-size: 20px;
						align-items: center;
						font-weight: bold;
					}

					.dingbu-a-b-b {
						width: 100%;
						height: 4vh;
						color: white;
						font-size: 16px;
						display: flex;
						align-items: center;
					}

					.dingbu-a-b-c {
						width: 100%;
						height: 3vh;
						color: white;
						font-size: 16px;
						display: flex;
						align-items: center;
						justify-content: space-between;
					}
				}
			}

			.dingbu-b {
				width: 100%;
				height: 32vh;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				align-items: center;

				.dingbu-b-a {
					width: 30%;
					height: 14vh;
					background-color: #F4F2FE;
					border-radius: 5px;
					font-size: 13px;
					text-align: center;

					.dingbu-b-a-a {
						width: 100%;
						height: 8vh;
						display: flex;
						align-items: flex-end;
						justify-content: center;
					}
				}

				.dingbu-b-b {
					width: 30%;
					height: 14vh;
					background-color: #EFF9F7;
					border-radius: 5px;
					font-size: 13px;
					text-align: center;

					.dingbu-b-b-a {
						width: 100%;
						height: 8vh;
						display: flex;
						align-items: flex-end;
						justify-content: center;
					}
				}

				.dingbu-b-c {
					width: 30%;
					height: 14vh;
					background-color: #F3FBFE;
					border-radius: 5px;
					font-size: 13px;
					text-align: center;

					.dingbu-b-c-a {
						width: 100%;
						height: 8vh;
						display: flex;
						align-items: flex-end;
						justify-content: center;
					}
				}

				.dingbu-b-d {
					width: 30%;
					height: 14vh;
					background-color: #F3FBFE;
					border-radius: 5px;
					font-size: 13px;
					text-align: center;

					.dingbu-b-d-a {
						width: 100%;
						height: 8vh;
						display: flex;
						align-items: flex-end;
						justify-content: center;
					}
				}

				.dingbu-b-e {
					width: 30%;
					height: 14vh;
					background-color: #FEFAF2;
					border-radius: 5px;
					font-size: 13px;
					text-align: center;

					.dingbu-b-e-a {
						width: 100%;
						height: 8vh;
						display: flex;
						align-items: flex-end;
						justify-content: center;
					}
				}

				.dingbu-b-f {
					width: 30%;
					height: 14vh;
					background-color: #EFF9F7;
					border-radius: 5px;
					font-size: 13px;
					text-align: center;

					.dingbu-b-f-a {
						width: 100%;
						height: 8vh;
						display: flex;
						align-items: flex-end;
						justify-content: center;
					}
				}
			}

			.dingbu-c {
				width: 100%;
				height: 16vh;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.dingbu-c-a {
					width: 30%;
					height: 14vh;
					background-color: #F4F2FE;
					border-radius: 5px;
					text-align: center;

					.dingbu-c-a-a {
						width: 100%;
						height: 8vh;
						display: flex;
						align-items: flex-end;
						justify-content: center;
					}
				}

				.dingbu-c-b {
					width: 30%;
					height: 14vh;
					background-color: #EFF9F7;
					border-radius: 5px;
					text-align: center;

					.dingbu-c-b-a {
						width: 100%;
						height: 8vh;
						display: flex;
						align-items: flex-end;
						justify-content: center;
					}
				}

				.dingbu-c-c {
					width: 30%;
					height: 14vh;
					background-color: #F3FBFE;
					border-radius: 5px;
					text-align: center;

					.dingbu-c-c-a {
						width: 100%;
						height: 8vh;
						display: flex;
						align-items: flex-end;
						justify-content: center;
					}
				}

			}
		}
	}
</style>